<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/max-width.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/jq.js"></script>
</head>
<body>
    <div class="search_box">
        <div class="search_bg">
            <div class="search_logo">
                <img src="images/Mango.png" width=200 alt="Mango.png">
                <img src="images/Cat_claw.png" alt="Cat_claw.png">
            </div>
            <div class="search_box_off"></div>
            <form class="search">
                <input type="text" id="search" name="text" placeholder="搜索">
            </form>
        </div>
    </div>
    <!-- 导航 -->
    <div class="header" id="top">
            <img class="logo" src="images/logo.png" width="70" height="70">
        <ul>
            <a href="#"><li>首页</li></a>
            <a href="#"><li>论坛</li></a>
            <a href="#"><li>空间</li></a>
            <a href="#"><li>关于</li></a>
        </ul>
    </div>
    <!-- 搜索 -->
    <div class="nav">
        <div class="box-shadow">
            <img src="images/search_x3.png" alt="" width="25" height="25">
            <form>
                <input type="text" id="text1" name="text" placeholder="搜索">
            </form>
        </div>
    </div>
    <!-- 左侧抽屉栏 -->
    <div class="sidebar">
        <ul>
            <a href="#"><li class="li1"><h1>(〃'▽'〃)</h1></li></a>
            <a href="#"><li class="li2"><h1>φ(>ω<*)</h1></li></a>
            <a href="#"><li class="li3"><h1>(*/ω＼*)</h1></li></a>
            <a href="#"><li class="li4"><h1>(￣▽￣)~</h1></li></a>
            <a href="#"><li class="li5"><h1>ヾ(ﾟ∀ﾟゞ)</h1></li></a>
        </ul>
        <ul>
            <a href="#"><li class="li1"><h1>(╥╯^╰╥)</h1></li></a>
            <a href="#"><li class="li2"><h1>(>ω･* )ﾉ</h1></li></a>
            <a href="#"><li class="li3"><h1>(๑´ㅂ`๑)</h1></li></a>
            <a href="#"><li class="li4"><h1>(*･ω< )</h1></li></a>
            <a href="#"><li class="li5"><h1>(=ﾟωﾟ)ﾉ</h1></li></a>
        </ul>
    </div>
    <!--上下按钮-->
    <div class="controls box-shadow">
        <a href="#top" class="jump">
            <div class="top">
                <div></div>
            </div>
        </a>
        <a href="#bottom" class="jump">
            <div class="bottom">
                <div></div>
            </div>
        </a>
    </div>
    <!-- 内容 -->
    <div class="content">
        <div class="bg">
            <img id="bg1" src="images/bg_1.png" alt="" width="282.5" height="257" style="float: left;">
            <img id="bg2" src="images/bg_2.png" alt="" width="174.5" height="237" style="float: right;margin-top: 20px;">
        </div>
        <div class="content_main box-shadow">
        <div class="content_main_header">
            <!-- 图片轮播 -->
            <div class="swiper-container box-shadow" id="swiper1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><a href="#"><img src="images/wallpaper/wallpaper_1.jpg" alt="" width="100%"></a></div>
                    <div class="swiper-slide"><a href="#"><img src="images/wallpaper/wallpaper_2.jpg" alt="" width="100%"></a></div>
                    <div class="swiper-slide"><a href="#"><img src="images/wallpaper/wallpaper_3.jpg" alt="" width="100%"></a></div>
                    <div class="swiper-slide"><a href="#"><img src="images/wallpaper/wallpaper_4.jpg" alt="" width="100%"></a></div>
                    <div class="swiper-slide"><a href="#"><img src="images/wallpaper/wallpaper_5.jpg" alt="" width="100%"></a></div>
                    <div class="swiper-slide"><a href="#"><img src="images/wallpaper/wallpaper_6.jpg" alt="" width="100%"></a></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination Mask"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <!-- 如果需要滚动条
                <div class="swiper-scrollbar"></div>
                -->
            </div>
            <div class="headlines">
                <div class="week_box">
                    <div class="week active box-shadow" id="btn1">周一</div>
                    <div class="week" id="btn2">周二</div>
                    <div class="week" id="btn3">周三</div>
                    <div class="week" id="btn4">周四</div>
                    <div class="week" id="btn5">周五</div>
                    <div class="week" id="btn6">周六</div>
                    <div class="week" id="btn7">周日</div>
                </div>
                <div class="swiper-container" id="swiper2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="comic">
                                <div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <div class="week_bg">
                                月曜日
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="comic">
                                <div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="week_bg">
                                火曜日
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="comic">
                                <div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="week_bg">
                                水曜日
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="comic">
                                <div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="week_bg">
                                木曜日
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="comic">
                                <div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="week_bg">
                                金曜日
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="comic">
                                <div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="week_bg">
                                土曜日
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="comic">
                                <div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>2.5话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>1话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                    <div class="comic_update">
                                        <a href=""><div class="comic_update_l"></div></a>
                                        <div class="comic_update_r">
                                            <a href="#">格林笔记 The Animation</a>
                                            <p>更新至<span>3话</span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="week_bg">
                                日曜日
                            </div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination" id="swiper-pagination2"></div>
                </div>
            </div>
        </div>
    </div>

    <!--内容2-->
    <div style="margin: 10px 0;">
        <div class="content_main_body padding-10px box-shadow pos-relative bgc_LightSkyBlue">
            <div class="Super_Mario">
                <div class="cloud cloud_1"></div>
                <div class="cloud cloud_2"></div>
                <div class="fly_reward_brick"></div>
                <div class="reward_brick reward_brick_1"></div>
                <div class="red_brick red_brick_1"></div>
                <div class="reward_brick reward_brick_2"></div>
                <div class="red_brick red_brick_2"></div>
                <div class="reward_brick reward_brick_3"></div>
                <div class="red_brick red_brick_3"></div>
                <div class="hill"></div>
                <div class="grass"></div>
                <div class="Sewer"></div>
                <div class="reward_brick reward_brick_4"></div>
                <div class="Castle"></div>
                <div class="Mario"></div>
                <div class="red_brick_crack"></div>
            </div>
        </div>
    </div>

    <!--内容3
    <div style="margin-top: 10px;width: 100%;height: 100px;border: 1px solid;"></div>
    <!--内容2
    <div style="margin-top: 10px;width: 100%;height: 100px;border: 1px solid;"></div>-->
    </div>
    <!-- 网站相关 -->
    <footer>
        <div id="bottom" style="text-align: center;margin-top: 40px;font-size: 20px;opacity:.7;font-weight: bold;"><i>@メ埋梦ﾐ---⛄</i></div>
    </footer>
    <script color="255,179,103" opacity='1' zIndex="-2" count="199" src="js/canvas-nest.js"></script>

    <script src="js/swiper_demo.js"></script>
</body>
</html>